<template>
    <div class="hardware-info-panel">
      <!-- 设备规格 -->
      <div class="section-title">设备规格:</div>
      <el-row :gutter="24" class="info-row">
        <el-col :span="12">
          <div class="info-item"><span class="label">总内存：</span><span>{{ cpuTable[0]?.memTotalSize }}MB</span></div>
          <div class="info-item"><span class="label">CPU线程数：</span><span>{{ cpuTable[0]?.cpuLogicCount }}</span></div>
          <div class="info-item"><span class="label">CPU频率/MHz：</span><span>{{ cpuTable[0]?.cpuFreq }}</span></div>
          <!-- <div class="info-item"><span class="label">总磁盘容量：</span><span>113.11GB</span></div> -->
          <!-- <div class="info-item"><span class="label">接入类型：</span><span>Android二进制</span></div> -->
        </el-col>
        <el-col :span="12">
          <div class="info-item"><span class="label">架构类型：</span><span>{{ cpuTable[0]?.archType }}</span></div>
          <div class="info-item"><span class="label">CPU核数：</span><span>{{ cpuTable[0]?.cpuPhysicsCount }}</span></div>
          <div class="info-item"><span class="label">CPU型号：</span><span>{{ cpuTable[0]?.cpuModelName }}</span></div>
          <!-- <div class="info-item"><span class="label">总磁盘使用空间：</span><span>36.30GB</span></div> -->
          <!-- <div class="info-item"><span class="label">版本号：</span><span>1.9.8</span></div> -->
        </el-col>
      </el-row>
      <div class="divider"></div>
  
      <!-- 硬盘列表 -->
      <div class="section-title">硬盘列表:</div>
      <el-table :data="cpuTable" border style="width:100%;">
        <el-table-column prop="cpuModelName" label="硬盘名称" />
        <el-table-column prop="archType" label="类型" />
        <!-- <el-table-column prop="memTotalSize" label="总容量" width="120"/> -->
        <!-- <el-table-column prop="used" label="已用容量" width="120"/> -->
        <!-- <el-table-column prop="readIops" label="随机读IOPS" width="120"/> -->
        <!-- <el-table-column prop="writeIops" label="随机写IOPS" width="120"/> -->
        <!-- <el-table-column prop="testTime" label="压测时间" width="140"/> -->
        <template #empty>
          <div class="empty-block">
            <el-icon style="font-size:32px;"><i class="el-icon-document-remove"></i></el-icon>
            <div>暂无数据</div>
          </div>
        </template>
      </el-table>
    </div>
  </template>
  
  <script setup name="HardwareInfoPanel">
  import { ref } from 'vue'
  import { hardwareInfo } from '@/api/producer/device'

  const cpuTable = ref([]) // 暂无数据

  const props = defineProps({
  formDrawer: {
    type: Object,
    required: true
  },
  activeName: { type: String, required: true }
})

watch(
  [() => props.activeName, () => props.formDrawer.sn],
  ([tab, sn], [oldTab, oldSn]) => {
    if (tab === 'fifth' && sn) {
      getFetch(sn)
    }
  },
  { immediate: true }
)

function getFetch(sn) {
  // 获取硬件信息
  let params = { sn }
  hardwareInfo(params).then(res => {
    if(res.code === 200){
      cpuTable.value = res.rows
    }
  })
}
  
  const diskTable = ref([]) // 暂无数据
  </script>
  
  <style scoped>
  .hardware-info-panel {
    font-size: 14px;
    color: #222;
    background: #fff;
  }
  .section-title {
    font-weight: bold;
    margin: 16px 0 8px 0;
    font-size: 15px;
  }
  .info-row {
    margin-bottom: 0;
  }
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    min-height: 28px;
  }
  .label {
    color: #888;
    min-width: 110px;
    display: inline-block;
    text-align: right;
    margin-right: 8px;
  }
  .divider {
    border-bottom: 1px solid #eee;
    margin: 16px 0 16px 0;
  }
  .empty-block {
    padding: 32px 0;
    color: #aaa;
    text-align: center;
  }
  </style>